import React from 'react'
import {AutoComplete, Button, Card, Col, Divider, Form, Input, InputNumber, Row, Select} from 'antd'
import './OrderInfo.less'

const {Option} = Select
const FormItem = Form.Item
const TextArea = Input.TextArea

class OrderInfo extends React.Component {
  amountValidRule = {
    validator: (rule, value, callback) => {
      const {amount} = this.props
      if (value > parseFloat(amount)) {
        callback(rule.message)
      }
      callback()
    }, message: '业绩金额必须小于或等于订单金额',
  }

  constructor (props) {
    super(props)
  }

  handleSelect (name, {value, children}, hasName) {
    const {dispatch} = this.props
    const payload = {}
    payload[`${name}Id`] = value
    if (hasName) {
      payload[`${name}Name`] = children
    }
    dispatch({
      type: 'createOrder/updateState',
      payload,
    })
  }

  handleChange (val, name) {
    const {dispatch} = this.props
    const payload = {}
    payload[name] = val
    dispatch({
      type: 'createOrder/updateState',
      payload,
    })
  }

  render () {
    const {
      amount,
      realPayAmount,
      belongEmp,
      prepayType,
      customerChannel,
      empDataSource,
      handleSearch,
      handleExtraAmountChange,
      handleEmpAmountChange,
      empAmounts,
      extraAmount,
      current,
      onOk,
      form: {
        getFieldDecorator,
        validateFields,
        getFieldsValue,
      },
    } = this.props
    const {customerChannelId, prepayTypeId, awardEmp1Id, awardEmp2Id, awardEmp3Id, empRemark} = current

    const formItemLayout = {
      labelCol: {
        span: 7,
      },
      wrapperCol: {
        span: 17,
      },
    }

    const ColProps = {
      xs: 6,
      sm: 6,
      style: {
        marginBottom: 6,
      },
    }

    return (
      <Card title={'订单信息'} style={{marginTop: 24}}>
        <Row gutter={24}>
          <Col span={3}>
            <div className={'flex-status-bar'}>
              <span>订单金额合计：<span style={{fontWeight: 'bold', fontSize: 18}}>{amount}</span></span>
            </div>
          </Col>
          <Col span={3}>
            <div className={'flex-status-bar'}>
              <span>代收金额合计：<span style={{fontWeight: 'bold', fontSize: 18}}>{realPayAmount}</span></span>
            </div>
          </Col>
          <Divider/>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="订单总额">
              <InputNumber disabled readOnly value={amount} placeholder="请输入"/>
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="代收金额">
              <InputNumber disabled readOnly value={realPayAmount} placeholder="请输入"/>
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="附加金额">
              <InputNumber value={extraAmount['addAmount']} onChange={val => handleExtraAmountChange({addAmount: val})}
                           placeholder="请输入"/>
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="优惠金额">
              <InputNumber value={extraAmount['discountAmount']}
                           onChange={val => handleExtraAmountChange({discountAmount: val})} placeholder="请输入"/>
            </FormItem>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="预付方式">
              {getFieldDecorator('prepayWays', {
                initialValue: prepayTypeId,
                rules: [{required: true, message: '请选择预付方式'}],
              })(
                <Select onSelect={(_, {props}) => this.handleSelect('prepayType', props, true)} allowClear
                        placeholder={'请选择预付方式'}>
                  {prepayType.map(_ => <Option value={_.id}>{_.name}</Option>)}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="预付金额">
              {getFieldDecorator('prepayAmount', {
                initialValue: extraAmount['prepayAmount'],
                rules: [{required: true, message: '请选择预付金额'}],
              })(
                <InputNumber onChange={val => handleExtraAmountChange({prepayAmount: val})} placeholder="请输入"/>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label={'业绩员工1'}>
              {getFieldDecorator('emp1', {
                initialValue: awardEmp1Id || belongEmp.id,
                rules: [{required: true, message: '请选择业绩员工'}],
              })(
                <AutoComplete
                  alowClear
                  style={{width: '100%'}}
                  dataSource={empDataSource.map(_ => <Option value={_.id}>{_.name}</Option>)}
                  onSearch={handleSearch}
                  onSelect={(_, {props}) => this.handleSelect('awardEmp1', props, false)}
                  placeholder="员工编号或名称"
                />,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="金额">
              <InputNumber value={empAmounts[0]} placeholder="请输入"/>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="业绩员工2">
              <AutoComplete
                defaultValue={awardEmp2Id}
                alowClear
                style={{width: '100%'}}
                dataSource={empDataSource.map(_ => <Option value={_.id}>{_.name}</Option>)}
                onSearch={handleSearch}
                onSelect={(_, {props}) => this.handleSelect('awardEmp2', props, false)}
                placeholder="员工编号或名称"
              />
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="金额">
              {getFieldDecorator('amount2', {
                initialValue: empAmounts[1],
                rules: [this.amountValidRule],
              })(
                <InputNumber onChange={val => {
                  const {amount3} = getFieldsValue()
                  handleEmpAmountChange([0, val, amount3])
                }} placeholder="请输入"/>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="业绩员工3">
              <AutoComplete
                defaultValue={awardEmp3Id}
                alowClear
                style={{width: '100%'}}
                dataSource={empDataSource.map(_ => <Option value={_.id}>{_.name}</Option>)}
                onSearch={handleSearch}
                onSelect={(_, {props}) => this.handleSelect('awardEmp3', props, false)}
                placeholder="员工编号或名称"
              />
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="金额">
              {getFieldDecorator('amount3', {
                initialValue: empAmounts[2],
                rules: [this.amountValidRule],
              })(
                <InputNumber onChange={val => {
                  const {amount2} = getFieldsValue()
                  handleEmpAmountChange([0, amount2, val])
                }} placeholder="请输入"/>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="获客渠道">
              {getFieldDecorator('customerChannel', {
                initialValue: customerChannelId,
                rules: [{required: true, message: '请选择获客渠道'}],
              })(
                <Select onSelect={(_, {props}) => this.handleSelect('customerSource', props, true)} allowClear
                        placeholder={'请选择获客渠道'}>
                  {customerChannel.map(_ => <Option value={_.id}>{_.name}</Option>)}
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <FormItem labelCol={{span: 3}} wrapperCol={{span: 21}} label="订单备注">
              <TextArea defaultValue={empRemark} onChange={e => this.handleChange(e.target.value, 'empRemark')} rows={2} placeholder="描述信息"/>
            </FormItem>
          </Col>
          <Col span={12}>
            <Button type="primary" onClick={e => onOk(e)}>保存</Button>
          </Col>
        </Row>
      </Card>
    )
  }
}

export default OrderInfo
